NotionのMermaid使って業務整理してみた。

はじめに

はじめまして、ネクストモード株式会社のマーケティング事業部でセールス担当してます。いずみです。今回が初投稿、よろしくお願いします。

この度、ネクストモードがNotion販売代理店となったことを記念して、私も最近Notionで取り組んでみたことをご紹介してみたいと思います！

非エンジニアの方でも活用しやすい内容になってますので、DevelopersIOご愛読のエンジニアの皆様から、是非、一緒にNotionを使っている営業・経理・総務のご担当にもシェアして頂けたら嬉しいです！

Notionを使い続けると出てくる悩み。

ネクストモードでは、早い時期からNotionを取り入れ社内のナレッジ共有を行ってきているのですが、長く使っているとNotionの自由度の高さゆえの悩みが出てきます。

いつでも誰でも、ページを作成してナレッジ共有ができてしまうが故に、「あのページどこに行ったっけ？」とか、「あれ？内容重複しちゃってるね。」みたいなことになりがちなのです。

めちゃ便利Tips

Notion内でコンテンツ検索する時は、「Ctrl + K」でコンテンツ検索ができます。

この検索機能が有能すぎて、簡単にに欲しいページに飛べちゃうが故に、普段は苦労しないのでページ体系のカオス化が進みやすいのカモしれません?

---

使いなれてしまうと多少インデックスが乱れていても不自由は感じないのですが、社内ナレッジがそれではイケません。

と、いうことで年度末ということもあり新年度に新しいメンバーを迎え入れる準備も兼ねて社内ナレッジの整理を行っていた訳です。

その中で思いついたのが、本日ご紹介するMermaidを活用した整理術となります！！

マークダウン構文「Mermaid」とは？

Mermaidに関する詳しいことは、こちらの記事で紹介されています。

ただ、私自身、この記事が出て初見でさーっと斜め読みした時点での感想は、

「構造記述でフロー描画かぁ、ちょっと小難しそうだな?」くらいのものでした。

正直、コンサルティングするなら概念・状態・相関関係を構造データで整理してやりとりする機会が多いと思うので使い道多いだろうなとは感じましたが…、セールス担当としては自分のフィールドで使うシーンがあるとはあまり考えられませんでした。

フローで業務整理するという考え方。

そもそも、「業務整理してフロー化する」っていうと、ちょっとメンドクサそうなイメージありますよね。

なので、気が重くなる前にフロー化して業務整理するということ自体の有用性についてすこし触れてから、細かい活用方法に入っていきたいと思います。

一般的なフロー化のメリット

• 目次だけでは掴み切れない各項の相関関係が明確化し、理解が深まる。
• 順序立てて並べていく過程で、手順や説明の抜け漏れに気付ける。

ここまでは、そらそーだわなーというところ。

そこでさらに、Mermaidを活用することで以下のメリットが追加で得られます。

Mermaidを活用することで追加で得られるメリット

• 式による構造定義で瞬時に描画されるので細かな手直しが少なく、手早くできる。
  • シェイプやコネクタをちまちま微調整する手間が省ける。
  • ノードの幅や中央揃えなどをちまちま微調整する手間が省ける。
• click構文でフロー中のノードに簡単にリンクを貼れる。

この２点目のclick構文というのが非常にNotionと相性がいいなと思ってます。

フローとして可視化した上で、各ステップに詳細ページへのリンク付けて関連性を持たせることができるってことです！

Mermaidの始め方、おさらい。

１．Notion上で、“/code”ブロックを使います。

２．表示されたコードブロックの左上から「Mermaid」を選択。

この「Mermaid」の右側を分割にしておくとマークダウン構文とフローが一緒に見れます。

完成したらプレビューに切り替えるとフローだけの表示になってキレイです！

３．フローチャートであることを宣言する。

１行目はこれから書くのがフローチャートだよっていうおまじないです。

後ろの”TD”が Top ⇒ Down で上から下に流れるフローってことですね。

“LR”にすると Left ⇒ Right で左から右に流れるフローになります。

flowchart TD

あとは、覚える構文は３種類だけで十分！

１．ノードを作る

ノードを作る１行の構造は、以下を順番に並べただけです。

• • ノードの名前
  • カッコの括り方でノードの形を表す
  • ノードの中に書き込むテキスト

２．ノードの形は、これくらい把握しとけば何とかなりそう！

３．関連性は、ノード名とノード名を矢印っぽく記号で繋ぐだけ！

同じノード名を指定して枝分かれさせることも、自由自在！！

そして、後からでもclick構文を書き足すだけでフローと詳細ページをリンクできる！

構造化して、直リンクを貼ることで増えすぎたナレッジ情報の整理にも役立ちます。

こんなに手早く簡単にフローが書けちゃう！！

蓄積した集合知をより強力に活用できる様、体系化しよう！

どんな仕事現場にも、こんなシーンがありますよね！！

• この手続きする時は流れが決まってるから注意が必要だよ、あのページどこだったかな。
• あのタイミングでこの話できてたらよかったんだけど、忘れてたな。
• いつも管理簿更新するの忘れるんだよな。

誰かが、あるいはあなたが、こういったセリフを呟いた時こそ、今あるナレッジを体系化して再定義するチャンスなのかもしれません！！

私は、ニーズ把握・初期提案・NDA締結・見積り提示・注文書作成・キックオフ・検収・請求などの流れにあんちょこ資料・管理簿の場所などをフロー化してリンク付けて整理したことで頭の中をとっても整理することができました！

それでは、みなさま。よき「あたらしい働き方」を?